<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="../jquery-3.7.1.js"></script>

    <style>
        
    </style>
    
</head>
<body>
    <!-- self-tag：用户自定义属性 -->
    姓名：<input type="text" id="name" value="hello"/>

    <p/>

    <button id="btn1">获取内容</button>
    <button id="btn2">设置内容</button>

    
    <!-- 第三：使用 JQ -->
    <script>
        $("#btn1").click(function(){
            // 第一：选择要操作的节点 
            var textNode = $("#name") ;

            // 第二：进行相关的操作 - 获取 value 属性值
            var v = textNode.val() ;

            console.log(v);
        
        }) ;


        $("#btn2").click(function(){
            // 第一：选择要操作的节点 
            var textNode = $("#name") ;

            // 第二：进行相关的操作 - 设置 value 属性值
            textNode.val("好好学习") ;
        }) ;

   
      



    </script>
</body>
</html>